<template>
    <el-row class="app">
        <el-row>创建应用</el-row>
        <el-form label-width="100px" :model="form" :rules="rules" ref="form" style="width:800px;margin:60px auto">
            <el-form-item label="应用名称" prop="name">
                <el-input v-model="form.name" placeholder="请填写应用名称"></el-input>
            </el-form-item>
            <el-form-item label="应用分类" prop="category_id">
                <el-select v-model="form.category_id">
                    <el-option v-for="(item,index) in categoryData" :key="index" :value="item.id" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="应用描述">
                <el-input v-model="form.info" type="textarea" placeholder="请填写应用描述"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-checkbox-group v-model="form.address" style="display:none">
                    <el-checkbox label="province" name="type"></el-checkbox>
                    <el-checkbox label="city" name="type"></el-checkbox>
                    <el-checkbox label="district" name="type"></el-checkbox>
                </el-checkbox-group>
                <el-region @region="handleChange"></el-region>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleOk('form')">确认</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</template>
<script>
export default {
    data() {
        return {
            template_id:0,
            form: {
                name: "",
                info: "",
                address: [],
                category_id: ""
            },
            rules: {
                name: {
                    required: true,
                    message: "请填写应用名称",
                    trigger: "change"
                },
                category_id: {
                    required: true,
                    message: "请选择应用分类",
                    trigger: "change"
                },
                address: {
                    type: "array",
                    required: true,
                    message: "请选择应用分类",
                    trigger: "change"
                }
            },
            categoryData: []
        };
    },
    async asyncData({ app, query }) {
        let data = {};
        data.template_id = query.id;
        const res = await app.$axios.$get(
            `/api/app/home/app/templateIndustry?templateId=${query.id}`
        );
        if (res && res.errmsg === "ok") {
            data.categoryData = res.data;
        }
        return data;
    },
    methods: {
        handleChange(value) {
            this.form.address = value;
        },
        handleOk(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        async submit() {
            const res = await this.$axios.$post("/api/app/home/app/create", {
                template_id: this.template_id,
                template_industry_id: this.form.category_id,
                name: this.form.name,
                info: this.form.info,
                province: this.form.address[0],
                city: this.form.address[1],
                district: this.form.address[2]
            });
            if (res && res.errmsg === "ok") {
                this.$router.push("/app/apps");
            }
        }
    }
};
</script>
<style scoped>
.app {
    width: 1200px;
    min-height: 500px;
    background: #fff;
    padding: 50px;
}
</style>


